<template>
  <div id="home">
    <nav-bar class="navbar-title">
      <div slot="center">购物街</div>
    </nav-bar>
    <!-- 当滚动到tabControl时，将better-scroll中的tabControl隐藏，这里的显示 -->
    <tab-control
      v-show="!scrollTabContShow"
      ref="tabcont2"
      class="tabcont"
      @itemClick="itemClick"
      :titles="['流行','新款','精选']"
    />
    <scroll
      class="content"
      ref="scroll"
      :probe-type="3"
      @scroll="contentScroll"
      :pullUpLoad="true"
      @pullingUp="pullingUp"
    >
      <swiper-banner :banners="banners" @swiperImgLoad="swiperImgLoad" />
      <recommend :recommends="recommends" />
      <popular-week />
      <!-- 
        tab-control的吸顶效果？
        1.必须知道滚动到多少时，开始有吸顶效果，这个时候就需要获取到tabControl的offsetTop值
        但是，如果直接在mounted中获取tabControl的offsetTop，那么值是不正确的
        如何获取正确的offsetTop的值？
        监听图片的加载完成，加载完成后，发出事件，再获取正确的值
        2.监听滚动，动态的改变tabControl的样式
        （因为在better-scroll中，是根据transition设置滚动的，所以需要在better-scroll外层在来个tabControl，进行替换）
        来达到tabControl看上去吸顶的效果
      -->
      <tab-control
        v-show="scrollTabContShow"
        ref="tabcont1"
        @itemClick="itemClick"
        :titles="['流行','新款','精选']"
      />
      <goods-list :goods="showGoods" />
    </scroll>
    <!-- 
      better-scroll 可滚动局域的问题？
      better-scroll在决定有多少区域可以滚动时，是根据scrollHeight属性决定
      scrollHeight属性是根据放better-scroll的content中的子组件的高度所决定
      但是我们的首页中，刚开始计算scrollHeight属性时，是没有将图片计算在内的
      所以，计算出来的值是错误的
      后来图片加载进来之后有了新的高度，但是scrollHeight属性并没有更新
      所以滚动出现了问题。
      如何解决这个问题？
      监听每一张图片是否加载完成，只要有一张图片加载完成了执行 refresh() 方法 ，refresh()  ：重新计算 better-scroll，当 DOM 结构发生变化的时候务必要调用确保滚动的效果正常。
      如何监听图片加载完成了？
      原生js的监听图片： img标签中有个onload事件用于监听图片加载完成
      vue中监听图片： img 标签中 @load="方法" ：用于监听图片的加载完成

      goods-list-item中的图片加载完成事件，如何通知到scroll组件中进行refresh方法？
      通过 事件总线 this.$bus    ；需要自己在vue的原型上增加 $bus: Vue.prototype.$bus = new Vue()
        this.$bus.$emit('发送的事件名称',携带的参数)
        this.$bus.$on('接收事件名称',(参数)=>{})
    -->
    <back-top @click.native="backTop" v-show="isBacktopShow" />
  </div>
</template>

<script>
import navBar from "components/common/navbar/navbar";
import swiperBanner from "./childComponents/swiperBanner";
import recommend from "./childComponents/recommend";
import popularWeek from "./childComponents/popularWeek";

import tabControl from "components/content/tabControl/tabControl";
import GoodsList from "components/content/goods/goodsList";
import Scroll from "components/content/scroll/scroll";

import { getHomeMultidata, getHomeGoods } from "service/home";

import {
  goodsItemImgLoadMixin,
  backTopMixin,
  tabControlMixin
} from "utils/mixin";
export default {
  name: "Home",
  components: {
    navBar,
    swiperBanner,
    recommend,
    popularWeek,
    tabControl,
    GoodsList,
    Scroll
  },
  data() {
    return {
      banners: [],
      recommends: [],
      goods: {
        pop: { page: 0, list: [] },
        new: { page: 0, list: [] },
        sell: { page: 0, list: [] }
      },
      tabContOffsetTop: 0, // 用于tabControl的offsetTop值
      scrollY: 0 // 记录滚动的Y值
    };
  },
  computed: {
    showGoods() {
      return this.goods[this.currentType].list;
    }
  },
  mixins: [goodsItemImgLoadMixin, backTopMixin, tabControlMixin],
  created() {
    this.getHomeMultiData();
    this.getHomeGoods("pop");
    this.getHomeGoods("new");
    this.getHomeGoods("sell");
  },
  mounted() {
    //  this.$refs.tabcont1 获取到的是一个组件对象，而不是DOM元素，通过组件对象.$el 获取组件对象中的DOM元素，在通过.offsetTop获取距离顶部的高度
    // console.log(this.$refs.tabcont1);
    // console.log(this.$refs.tabcont1.$el.offsetTop);  不正确的值。需要等待加载完图片之后的offsetTop才是正确的值（这里只对轮播图的加载做处理）
  },
  activated() {
    // 进入组件时，将离开时的Y值设置回去，（防止better-scroll导致组件多次切换带来的不能保存状态的问题）
    this.$refs.scroll.scrollTo(0, this.scrollY, 0);
    this.$refs.scroll.refresh(); //重置： 防止保存的状态突然回到顶部
  },
  deactivated() {
    // 离开组件时，记录滚动的Y值
    this.scrollY = this.$refs.scroll.getScrollY();

    // 离开home组件时，取消事件总线goodsItemImgLoad的监听
    this.$bus.$off("goodsItemImgLoad", this.goodsItemImgLoadListener);
  },
  methods: {
    /**事件操作相关代码 */

    /* 监听滚动的距离 */
    contentScroll(position) {
      // 1. 设置返回顶部的显示
      this.isBacktopShow = -position.y > 1500; // 不能使用mixin混入
      // 2.设置Scroll中的tabControl的显示与隐藏
      this.scrollTabContShow = !(-position.y > this.tabContOffsetTop);
    },
    pullingUp() {
      this.getHomeGoods(this.currentType);
      this.$refs.scroll.finishPullUp();
    },
    swiperImgLoad() {
      // 轮播图加载完成
      this.tabContOffsetTop = this.$refs.tabcont1.$el.offsetTop;
    },

    /**获取数据相关代码 */
    getHomeMultiData() {
      getHomeMultidata().then(res => {
        this.banners = res.data.banner.list;
        this.recommends = res.data.recommend.list;
      });
    },
    // 获取商品数据
    getHomeGoods(type) {
      const page = this.goods[type].page + 1;
      getHomeGoods(type, page).then(res => {
        this.goods[type].list.push(...res.data.list);
        this.goods[type].page += 1;
      });
    }
  }
};
</script>

<style  lang="less" scoped>
#home {
  padding-top: 44px;
  // padding-top: 44px;
  height: 100vh;
  position: relative;
  .navbar-title {
    background-color: var(--color-tint);
    color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
  }
  .content {
    position: absolute;
    left: 0;
    right: 0;
    top: 44px;
    bottom: 49px;
  }
  // 使用计算函数 计算scroll需要的高度
  // .content {
  //   height: calc(100% - 93px);
  //   margin-top: 44px;
  // }

  // .tabcon {  粘性布局实现tab-control吸顶效果 （better-scroll下无效）
  //   position: sticky;
  //   top: 44px;
  // }
  .tabcont {
    position: relative;
    z-index: 99;
  }
}
</style>